* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-image: linear-gradient(to left, #f0fdbd, #277d9f);
}
body .father {
  display: flex;
  padding: 1.667rem 2.083rem 0.833rem 1.667rem;
}
body .father .left {
  flex: auto;
}
body .father .left .top span {
  color: #393d40;
  padding: 0 5px;
}
body .father .left .top input {
  width: 7.5rem;
  height: 1.667rem;
  padding-left: 0.125rem;
  border-radius: 0.125rem;
  border: none;
  outline: none;
}
body .father .left .top button {
  width: 2.917rem;
  height: 1.667rem;
  background-color: #237b9e;
  border-radius: 3px;
  border: none;
  color: #fff;
}
body .father .left table {
  margin-top: 1.25rem;
  border: 1px solid #9ac1be;
  border-collapse: collapse;
  text-align: center;
  border-radius: 5px;
}
body .father .left table th {
  background-color: #5da3a9;
  border-radius: 0.208rem;
}
body .father .left table th,
body .father .left table td {
  width: 11.667rem;
  height: 1.667rem;
  color: #444449;
  border-right: 1px solid #9ac1be;
  border-bottom: 1px solid #9ac1be;
}
body .father .right {
  width: 500px;
}
body .father .right h3 {
  color: #444449;
}
body .father .right .line {
  height: 12.5rem;
}
body .father .right .bar {
  height: 12.5rem;
}
